<template>
  <div class="search-container">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <button @click="$router.go(-1)" class="back-btn">
        <span>←</span> 返回
      </button>
    </div>

    <!-- 搜索结果头部 -->
    <div class="search-header">
      <div class="search-info">
        <h1 class="search-title">
          <span class="search-icon">🔍</span>
          搜索结果
        </h1>
        <div class="search-subtitle">
          <span class="search-keyword">"{{ searchContent }}"</span>
          <span v-if="movieList.length > 0" class="search-count">找到 {{ movieList.length }} 部电影</span>
          <span v-else-if="!loading" class="search-count">未找到相关电影</span>
        </div>
      </div>
    </div>

    <!-- 搜索结果内容 -->
    <div class="search-content">
      <!-- 空状态 -->
      <div v-if="!loading && movieList.length === 0" class="empty-state">
        <div class="empty-icon">🎬</div>
        <div class="empty-title">没有找到相关电影</div>
        <div class="empty-desc">
          尝试使用不同的关键词，或者
          <button @click="goHome" class="link-btn">浏览热门电影</button>
        </div>
      </div>

      <!-- 电影列表 -->
      <div v-else class="movie-grid">
        <div 
          v-for="movie in movieList" 
          :key="movie.id" 
          class="movie-card" 
          @click="goToMovieDetail(movie.id)"
        >
          <div class="movie-poster-container">
            <img 
              :src="movie.poster || 'https://via.placeholder.com/200x300?text=暂无海报'" 
              class="movie-poster" 
              alt="电影海报"
              @error="handleImageError"
            />
            <div class="movie-score-badge">
              <span class="score">{{ movie.score || 'N/A' }}</span>
            </div>
          </div>
          
          <div class="movie-info">
            <h3 class="movie-title">{{ movie.title }}</h3>
            <div class="movie-meta">
              <div class="meta-row">
                <span class="meta-label">年份：</span>
                <span class="meta-value">{{ movie.year || '未知' }}</span>
              </div>
              <div class="meta-row">
                <span class="meta-label">类型：</span>
                <span class="meta-value">{{ movie.genre || '未知' }}</span>
              </div>
              <div class="meta-row">
                <span class="meta-label">导演：</span>
                <span class="meta-value">{{ movie.director || '未知' }}</span>
              </div>
              <div class="meta-row" v-if="movie.actors">
                <span class="meta-label">主演：</span>
                <span class="meta-value">{{ movie.actors }}</span>
              </div>
            </div>
            
            <div class="movie-rating">
              <div class="stars">
                <span 
                  v-for="i in 5" 
                  :key="i" 
                  class="star"
                  :class="{ active: i <= Math.round(movie.starScore || 0) }"
                >★</span>
              </div>
              <span class="rating-text">{{ movie.score || 0 }} 分</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在搜索...</div>
      </div>

      <!-- 加载完成提示 -->
      <div v-if="finished && movieList.length > 0" class="load-finished">
        <div class="finished-icon">✅</div>
        <div class="finished-text">已显示全部搜索结果</div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchMovie } from "@/api/movie/movie.js"

export default {
  name: 'SearchMovie',
  data() {
    return {
      loading: false,
      movieList: [],
      searchContent: this.$route.query.q || '',
      pageNum: 1,
      pageSize: 20,
      finished: false
    }
  },
  mounted() {
    if (this.searchContent) {
      this.getList();
    }
  },
  watch: {
    '$route.query.q'(newQuery) {
      this.searchContent = newQuery || '';
      this.resetSearch();
      if (this.searchContent) {
        this.getList();
      }
    }
  },
  methods: {
    resetSearch() {
      this.movieList = [];
      this.pageNum = 1;
      this.finished = false;
      this.loading = false;
    },
    getList() {
      if (this.loading || this.finished) return;
      this.loading = true;
      
      const params = {
        title: this.searchContent,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      
      searchMovie(params).then(res => {
        if (res.data && res.data.rows) {
          const rows = res.data.rows.map(movie => {
            if (movie.poster && movie.poster.startsWith('http')) {
              movie.poster = `https://images.weserv.nl/?url=${movie.poster.replace(/^https?:\/\//, '')}`;
            }
            movie.starScore = movie.score ? movie.score / 2 : 0;
            return movie;
          });
          
          this.movieList = [...this.movieList, ...rows];
          
          if (rows.length < this.pageSize) {
            this.finished = true;
          } else {
            this.pageNum++;
          }
        } else {
          this.finished = true;
        }
      }).catch(error => {
        console.error('获取搜索结果失败:', error);
        this.finished = true;
      }).finally(() => {
        this.loading = false;
      });
    },
    goToMovieDetail(movieId) {
      this.$router.push({
        path: `/movie/${movieId}`,
        query: { from: 'search' }
      });
    },
    goHome() {
      this.$router.push('/home');
    },
    handleImageError(event) {
      event.target.src = 'https://via.placeholder.com/200x300?text=暂无海报';
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.search-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 顶部导航栏 */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.back-btn {
  background: none;
  border: none;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(-2px);
}

/* 搜索头部 */
.search-header {
  padding: 40px 24px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.search-info {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.search-title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.search-icon {
  font-size: 36px;
}

.search-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.search-keyword {
  font-size: 18px;
  font-weight: 600;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
}

.search-count {
  font-size: 16px;
  color: #666;
}

/* 搜索内容区域 */
.search-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 40px;
}

/* 空状态 */
.empty-state {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 60px 32px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 24px;
}

.empty-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.empty-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.link-btn {
  background: none;
  border: none;
  color: #667eea;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

.link-btn:hover {
  color: #764ba2;
}

/* 电影网格 */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* 电影卡片 */
.movie-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.movie-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.15);
}

.movie-poster-container {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.movie-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.movie-card:hover .movie-poster {
  transform: scale(1.05);
}

.movie-score-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 107, 53, 0.9);
  backdrop-filter: blur(10px);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
}

.movie-info {
  padding: 20px;
}

.movie-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-meta {
  margin-bottom: 16px;
}

.meta-row {
  display: flex;
  margin-bottom: 6px;
  font-size: 14px;
}

.meta-label {
  color: #666;
  font-weight: 500;
  min-width: 40px;
  margin-right: 8px;
}

.meta-value {
  color: #333;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  font-size: 16px;
  color: #ddd;
  transition: color 0.2s ease;
}

.star.active {
  color: #ffd700;
}

.rating-text {
  font-size: 14px;
  font-weight: 600;
  color: #ff6b35;
}

/* 加载状态 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(102, 126, 234, 0.1);
  border-left: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 16px;
  color: #667eea;
  font-weight: 500;
}

/* 加载完成提示 */
.load-finished {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  color: #666;
}

.finished-icon {
  font-size: 20px;
}

.finished-text {
  font-size: 16px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-header {
    padding: 20px 16px 16px;
  }
  
  .search-info {
    padding: 24px;
  }
  
  .search-title {
    font-size: 24px;
  }
  
  .search-content {
    padding: 16px;
  }
  
  .movie-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .search-subtitle {
    flex-direction: column;
    gap: 8px;
  }
  
  .empty-state {
    padding: 40px 20px;
  }
  
  .empty-icon {
    font-size: 48px;
  }
  
  .empty-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .movie-poster-container {
    height: 200px;
  }
  
  .movie-info {
    padding: 16px;
  }
  
  .search-keyword {
    font-size: 16px;
  }
}
</style>